<!DOCTYPE html>
<html lang="en">

<!-- Head tag -->
<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!--Description-->
    
        <meta name="description" content="angularjs相关网站

官方网站
官方文档
[学习网站]
http://www.angularjs.net.cn
http://www.apjs.net
http://www.runoob.com/angularjs/angularjs-tutorial.html
https://stacko">
    

    <!--Author-->
    
        <meta name="author" content="John Doe">
    

    <!--Open Graph Title-->
    
        <meta property="og:title" content="angular（一）"/>
    

    <!--Open Graph Description-->
    

    <!--Open Graph Site Name-->
    <meta property="og:site_name" content="Hexo"/>

    <!--Type page-->
    
        <meta property="og:type" content="article" />
    

    <!--Page Cover-->
    

        <meta name="twitter:card" content="summary" />
    

    <!-- Title -->
    
    <title>angular（一） - Hexo</title>

    <!-- Bootstrap Core CSS -->
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

    <!-- Custom CSS -->
    <link rel="stylesheet" href="/css/style.css">

    <!-- Custom Fonts -->
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="//fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css">
    <link href="//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="//oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- Gallery -->
    <link href="//cdnjs.cloudflare.com/ajax/libs/featherlight/1.3.5/featherlight.min.css" type="text/css" rel="stylesheet" />

    <!-- Google Analytics -->
    


    <!-- favicon -->
    
	
</head>


<body>

    <!-- Menu -->
    <!-- Navigation -->
<nav class="navbar navbar-default navbar-custom navbar-fixed-top">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header page-scroll">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/">逐风</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                
                    <li>
                        <a href="/">
                            
                                Home
                            
                        </a>
                    </li>
                
                    <li>
                        <a href="/archives">
                            
                                Archives
                            
                        </a>
                    </li>
                
                    <li>
                        <a href="/tags">
                            
                                Tags
                            
                        </a>
                    </li>
                
                    <li>
                        <a href="/categories">
                            
                                Categories
                            
                        </a>
                    </li>
                
                    <li>
                        <a href="https://github.com/klugjo/hexo-theme-clean-blog">
                            
                                <i class="fa fa-github fa-stack-2x"></i>
                            
                        </a>
                    </li>
                
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>

    <!-- Main Content -->
    <!-- Page Header -->
<!-- Set your background image for this header in your post front-matter: cover -->

<header class="intro-header" style="background-image: url('http://www.codeblocq.com/assets/projects/hexo-theme-clean-blog/img/home-bg.jpg')">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <div class="post-heading">
                    <h1>angular（一）</h1>
                    
                    <span class="meta">
                        <!-- Date and Author -->
                        
                        
                            2017-05-02
                        
                    </span>
                </div>
            </div>
        </div>
    </div>
</header>

<!-- Post Content -->
<article>
    <div class="container">
        <div class="row">

            <!-- Tags and categories -->
           

            <!-- Gallery -->
            

            <!-- Post Main Content -->
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <p>angularjs相关网站</p>
<ul>
<li><a href="http://angularjs.org" target="_blank" rel="external">官方网站</a></li>
<li><a href="https://code.angularjs.org/1.6.4/docs/api" target="_blank" rel="external">官方文档</a></li>
<li>[学习网站]<ul>
<li><a href="http://www.angularjs.net.cn" target="_blank" rel="external">http://www.angularjs.net.cn</a></li>
<li><a href="http://www.apjs.net" target="_blank" rel="external">http://www.apjs.net</a></li>
<li><a href="http://www.runoob.com/angularjs/angularjs-tutorial.html" target="_blank" rel="external">http://www.runoob.com/angularjs/angularjs-tutorial.html</a></li>
<li><a href="https://stackoverflow.com/" target="_blank" rel="external">https://stackoverflow.com/</a><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div></pre></td><td class="code"><pre><div class="line">angular  的jsonp请求需配置白名单</div><div class="line">angularjs双向数据绑定   双向: html 和 js</div><div class="line">谷歌开发维护</div><div class="line">快速搭建单页web应用</div><div class="line">单页web应用的特点</div><div class="line">   单页面应用对搜索引擎不友好 不适合做面向大众的展示型网站</div><div class="line">   网站后台管理系统 办公OA 混合App 等等不需要被搜索引擎搜索到的应用</div><div class="line">09年诞生，专注PC端，没考虑移动端，移动端性能差</div><div class="line"></div><div class="line">&#123;&#123;&#125;&#125; 这种双大括号的形式称之为插值表达式</div><div class="line">在angular中插值表达式  &#123;&#123; &#125;&#125;作用：显示angularjs变量，显示字符串  ，简单计算，不能写if,each</div><div class="line">angular写的文件使用带有服务器的方式打开  部分文件需要在http环境下(本地file协议下不支持)</div><div class="line">基本指令：</div><div class="line">&lt;body ng-app&gt; ng-app 找到它才执行它包裹的代码</div><div class="line">ng-click=&quot;val=val-0+1&quot;  点击事件</div><div class="line">ng-model=&apos;val&apos; 获取表单元素的值，并赋值给表单元素</div><div class="line">ng-init=&quot;val = &apos;哈哈&apos;&quot;  给变量赋值</div><div class="line"></div><div class="line">创建模块 angular.module(&apos;模块的名字&apos;,[&apos;要依赖的模块的名字(如果没有就写个空数组)&apos;])</div><div class="line">- 模块化开发带来的好处</div><div class="line">    + 方便管理, 复用,后期维护方便</div><div class="line">    + 解决代码冲突,方便多人协作开发</div><div class="line">angularjs核心思想</div><div class="line">- 通过指令扩展HTML功能,通过插值表达式绑定数据到HTML。</div><div class="line">- 不推荐在控制器中直接操作DOM,而是通过指令操作</div><div class="line">- 以数据为中心,用数据驱动DOM</div></pre></td></tr></table></figure>
</li>
</ul>
</li>
</ul>
<p>angular实现单页面的小例子<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div></pre></td><td class="code"><pre><div class="line">&lt;!DOCTYPE html&gt;</div><div class="line">&lt;html lang=&quot;en&quot;&gt;</div><div class="line">&lt;head&gt;</div><div class="line">    &lt;meta charset=&quot;UTF-8&quot;&gt;</div><div class="line">    &lt;title&gt;Document&lt;/title&gt;</div><div class="line">&lt;/head&gt; </div><div class="line">&lt;body ng-app=&apos;myApp&apos;&gt;</div><div class="line">    &lt;a href=&quot;#!/index&quot;&gt;首页&lt;/a&gt;</div><div class="line">    &lt;a href=&quot;#!/list&quot;&gt;列表页&lt;/a&gt;</div><div class="line">    内容显示在ng-view里</div><div class="line">    &lt;div ng-view&gt;&lt;/div&gt;</div><div class="line">    &lt;script src=&quot;node_modules/angular/angular.min.js&quot;&gt;&lt;/script&gt;</div><div class="line">    &lt;script src=&quot;node_modules/angular-route/angular-route.min.js&quot;&gt;&lt;/script&gt;</div><div class="line"></div><div class="line">    &lt;script&gt;</div><div class="line">        var app = angular.module(&apos;myApp&apos;,[&apos;ngRoute&apos;]);</div><div class="line">        app.config(function($routeProvider) &#123;</div><div class="line">            $routeProvider</div><div class="line">            .when(&apos;/index&apos;,&#123;</div><div class="line">               // 创建模板的方法1 外链 templateUrl:&apos;./tpl/index.html&apos;,</div><div class="line">               //创建模板的方法2 内联 template : &apos;&lt;div&gt;啊啊啊啊&#123;&#123;msg&#125;&#125;&lt;/div&gt;&apos;,</div><div class="line">               //创建模板的方法3 script templateUrl:&apos;indexTpl&apos;</div><div class="line">               //  templateUrl:&apos;indexTpl&apos;,</div><div class="line">                controller:&apos;ctrlIndex&apos;</div><div class="line"></div><div class="line">            &#125;)</div><div class="line">            .when(&apos;/list&apos;,&#123;</div><div class="line">                templateUrl:&apos;./tpl/list.html&apos;,</div><div class="line">                controller:&apos;ctrlList&apos;</div><div class="line">            &#125;)</div><div class="line">            .otherwise(&apos;/index&apos;)</div><div class="line">        &#125;);</div><div class="line">        app.controller(&apos;ctrlIndex&apos;,function($scope)&#123;</div><div class="line">            $scope.msg=&quot;首页的&quot;</div><div class="line">        &#125;);</div><div class="line">        app.controller(&apos;ctrlList&apos;,function($scope)&#123;</div><div class="line">            $scope.msg=&quot;列表页的&quot;</div><div class="line">        &#125;)</div><div class="line">    &lt;/script&gt;</div><div class="line">    &lt;script id=&quot;indexTpl&quot; type=&quot;text/ng-template&quot;&gt;</div><div class="line">        &lt;div&gt;啦啦啦&lt;/div&gt;</div><div class="line">    &lt;/script&gt;</div><div class="line">&lt;/body&gt;</div><div class="line">&lt;/html&gt;</div></pre></td></tr></table></figure></p>


                
            </div>

            <!-- Comments -->
            
                <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                    


                </div>
            
        </div>
    </div>
</article>

    <!-- Footer -->
    <hr />

<!-- Footer -->
<footer>
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <ul class="list-inline text-center">
                    

                    

                    
                        <li>
                            <a href="https://github.com/klugjo/hexo-theme-clean-blog" target="_blank">
                                <span class="fa-stack fa-lg">
                                    <i class="fa fa-circle fa-stack-2x"></i>
                                    <i class="fa fa-github fa-stack-1x fa-inverse"></i>
                                </span>
                            </a>
                        </li>
                    

                    

                    

                    
                </ul>
                <p class="copyright text-muted">&copy; 2018 John Doe<br></p>
                <p class="copyright text-muted">Original Theme <a target="_blank" href="http://startbootstrap.com/template-overviews/clean-blog/">Clean Blog</a> from <a href="http://startbootstrap.com/" target="_blank">Start Bootstrap</a></p>
                <p class="copyright text-muted">Adapted for <a target="_blank" href="https://hexo.io/">Hexo</a> by <a href="http://www.codeblocq.com/" target="_blank">Jonathan Klughertz</a></p>
            </div>
        </div>
    </div>
</footer>


    <!-- After footer scripts -->
    
<!-- jQuery -->
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>

<!-- Bootstrap -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<!-- Gallery -->
<script src="//cdnjs.cloudflare.com/ajax/libs/featherlight/1.3.5/featherlight.min.js" type="text/javascript" charset="utf-8"></script>

<!-- Disqus Comments -->



</body>

</html>